<template>
  <div class="box">
    <header class="header">
      <van-nav-bar
        title="账单"
        left-arrow
        @click-left="$router.go(-1)"
        @click-right="dataFn"
      >
        <span slot="right" style="font-size: .12rem;">
          2020年▼
        </span>
      </van-nav-bar>
      <!-- 账单结果 -->
      <div class="bill">
        <!-- 结余 -->
        <div class="balance">
          <p style="color: #9b8633;">
            结余
          </p>
          <p>
            <span style="font-size: .35rem;">{{TotalBalance}}</span>.00
          </p>
        </div>
        <!-- 收入支出 -->
        <div class="total">
          <!-- 收入 -->
          <div class="income" style="font-size: .13rem;">
            <span style="color: #9b8633;">收入</span>
            <span style="font-size: .20rem;"> {{Totalincome}}</span>.00
          </div>
          <!-- 支出 -->
          <div class="expenditure" style="font-size: .13rem;">
            <span style="color: #9b8633;">支出</span>
            <span style="font-size: .20rem;"> {{Totalexpenditure}}</span>.00
          </div>
        </div>
      </div>
    </header>
    <div class="content">
      <!-- 账单标题 -->
      <van-row style="color: #c4c4c4;line-height: .35rem;font-size: .10rem;">
        <van-col span="6">日期</van-col>
        <van-col span="6">收入</van-col>
        <van-col span="6">支出</van-col>
        <van-col span="6">结余</van-col>
      </van-row>
      <!-- 账单内容 -->
      <van-row v-for="(item, index) in BillList" :key="index" style="font-size:.14rem">
        <van-col span="6" style="color: #c4c4c4">
          <span>{{item.time}}</span>月
        </van-col>
        <van-col span="6">
          <span>{{item.income}}</span>.00
        </van-col>
        <van-col span="6">
          <span>{{item.expenditure}}</span>.00
        </van-col>
        <van-col span="6">
          <span>{{item.MonthlyBalance}}</span>.00
        </van-col>
      </van-row>
    </div>
    <!-- 日期选择弹出 -->
    <van-popup v-model="datatext" position="bottom" :style="{ height: '30%' }">
      <van-datetime-picker
        v-model="currentDate"
        type="year-month"
        title="选择年月"
        :min-date="minDate"
        :max-date="maxDate"
        :formatter="formatter"
        @confirm = "determineFn"
      />
    </van-popup>
  </div>
</template>

<script>
// 直接导入axios请求其他接口数据
import axios from 'axios'
// 安装好vue的ui库后在这里引入模块, 使用vant ui库组件三部曲引入vue 引入组件 使用组件
import Vue from 'vue'
import { NavBar, Col, Row, DatetimePicker, Popup } from 'vant'
Vue.use(NavBar)
Vue.use(Col)
Vue.use(Row)
Vue.use(DatetimePicker)
Vue.use(Popup)
export default {
  // 设置data初始值
  data () {
    return {
      minDate: new Date(2010, 0, 1),
      maxDate: new Date(2020, 10, 1),
      currentDate: new Date(),
      datatext: false, // 日期选择弹出
      BillList: [ // 账单列表
        // {
        //   month: 1, // 月份
        //   income: 100, // 收入
        //   expenditure: 200, // 支出
        //   MonthlyBalance: -100 // 每月结余
        // },
        // {
        //   month: 2, // 月份
        //   income: 200, // 收入
        //   expenditure: 200, // 支出
        //   MonthlyBalance: 0 // 每月结余
        // },
        // {
        //   month: 3, // 月份
        //   income: 500, // 收入
        //   expenditure: 100, // 支出
        //   MonthlyBalance: 400 // 每月结余
        // },
        // {
        //   month: 4, // 月份
        //   income: 500, // 收入
        //   expenditure: 1000, // 支出
        //   MonthlyBalance: -500 // 每月结余
        // },
        // {
        //   month: 5, // 月份
        //   income: 1000, // 收入
        //   expenditure: 900, // 支出
        //   MonthlyBalance: 100 // 每月结余
        // }
      ],
      Totalincome: 0, // 总支出
      Totalexpenditure: 0, // 总收入
      TotalBalance: 0 // 总结余,根据各个月份的结余计算出来的
    }
  },
  // 注册组件
  components: {},
  // 生命周期钩子函数
  mounted () {
    // 计算总收入
    // this.BillList.map((item, index) => {
    //   this.Totalincome += item.income
    // })
    // // 计算总支出
    // this.BillList.map((item, index) => {
    //   this.Totalexpenditure += item.expenditure
    // })
    // // 计算总结余,扽与总收入减去总支出
    // this.TotalBalance = this.Totalincome - this.Totalexpenditure
    // 请求账单数据
    axios({
      method: 'post',
      url: 'http://60.205.153.211:3000/api/lazyBookkeeping/QueryBookkeeping',
      data: {
        userid: localStorage.getItem('lazypiguserid')
      }
    }).then((res) => {
      // console.log(res.data.data)
      // 年
      this.year = res.data.data[0].timer.split('/')[0] * 1
      // 月
      this.month = res.data.data[0].timer.split('/')[1] * 1
      // 获取出来以后根据时间来进行划分
      // 双层循环,对其中每个元素都进行比较分类
      const temporarylist = [] // 存放临时数据
      res.data.data.map((item, index) => {
        // 每一次内层循环结束后都是分好一次类别的数,所以需要将账单收支总计以及每一个时间下的账单详细清零重计
        let TotalRevenue = 0 // 收入总计
        let TotalExpenditure = 0 // 支出总计
        const detailedlist = [] // 存放相应的同一时间下的对象类型的账单
        res.data.data.map((itm, idx) => {
          // 判断外层循环中的timer是否与内层是否相等然后进行分类统计
          if (item.timer === itm.timer) {
            // 支出收入计算
            if (itm.bill * 1 > 0) {
              TotalRevenue += itm.bill * 1
              // console.log('收入', TotalRevenue)
            } else {
              TotalExpenditure += itm.bill * 1
              // console.log('支出', TotalRevenue)
            }
            // 编译账单详情
            const objbill = {
              url: itm.icon, // 图标
              remarks: itm.remark, // 备注
              money: itm.bill * 1// 账单
            }
            // console.log('money', objbill.money)
            // 然后放进数组中
            detailedlist.push(objbill)
            // console.log('detailedlist', detailedlist)
            // 而后在继续编译时间分类下的账单详情
            const obj = {
              day: itm.timer.split('/')[2] * 1, // 从时间例如2020/05/20中取出最后一个代表天的数,然后可以用用这个对数组进行去重还有排序的操作
              time: itm.timer,
              income: TotalRevenue, // 收入
              expenditure: TotalExpenditure, // 支出
              MonthlyBalance: TotalRevenue * 1 + TotalExpenditure * 1, // 每月结余
              detailedlist
            }
            // 最后完成之后编译进临时总数组中
            temporarylist.push(obj)
            // this.BillList.push(obj)
          }
        })
      })
      // console.log('temporarylist', temporarylist)
      // 我们通过观察最后结果发现会有很多数据不完整的重复元素,我们可以通过计算纯收入与重新计算后的流水和时候相等来剔除掉不对的数据
      // let num = 0
      const arr = [] // 存放剔除错误数据的数组
      temporarylist.map((item, index) => {
        // console.log('次数', num += 1)
        let flowingWater = 0
        item.detailedlist.map((itm, index) => {
          // console.log(item.detailedlist)
          // console.log('流水', itm.money)
          flowingWater += itm.money
        })
        // console.log('数据收支和', item.income * 1 + item.expenditure * 1)
        // console.log('数据流水和', flowingWater)
        if (item.income * 1 + item.expenditure * 1 === flowingWater) {
          // console.log('数据一样则将本数据保存到总数组中')
          arr.push(item)
        }
      })
      // 数组去重
      this.BillList.push(arr[0])
      // console.log(this.BillList)
      for (let i = 0; i < arr.length; i++) {
        const item = arr[i]
        // for (let j = i; j < arr.length; j++) {
        //   const itm = arr[j]
        //   if (item.day === itm.day) {
        //   }
        // }
        // 判断一下在数组this.BillList中是否存在当前元素
        const isflag = this.BillList.some((itm, idx, arr) => {
          return itm.day === item.day
        })
        if (isflag === false) {
          this.BillList.push(item)
        }
      }
      // console.log(arr)
      // 总收入
      this.BillList.map((itm, idx) => {
        this.Totalincome += itm.income
      })
      // 总支出
      this.BillList.map((itm, idx) => {
        this.Totalexpenditure += itm.expenditure
      })
      // 计算总结余,扽与总收入减去总支出
      this.TotalBalance = this.Totalincome + this.Totalexpenditure
    })
  },
  // 计算属性
  methods: {
    formatter (type, val) {
      if (type === 'year') {
        return `${val}年`
      } else if (type === 'month') {
        return `${val}月`
      }
      return val
    },
    // 点击弹出时间选择
    dataFn () {
      this.datatext = true
      // console.log(this.datatext)
    },
    // 弹出框的确定按钮
    determineFn (value) {
      // console.log(value)
    }
  }
}
</script>

<style lang="scss" scoped>
// 样式
  // nav-bar导航栏
  /deep/ .van-nav-bar {
    height: .6rem;
    line-height: 0.6rem;
    text-align: center;
    background-color: #FDD949;
    user-select: none;
    // 通知栏左侧箭头
    /deep/ .van-icon-arrow-left {
      color: black;
      font-size: .20rem;
    }
    // 通知栏标题
    /deep/ .van-nav-bar__title {
      font-size: .16rem;
    }
  }
  // 账单头部
  .bill {
    height: 1.20rem;
    background-color: #fdd949;
    display: flex;
    flex-direction: column;
    // 结余
    .balance {
      font-size: .16rem;
      height: 80%;
      text-align: center;
    }
    // 收入支出
    .total {
      flex: 1;
      display: flex;
      justify-content: space-around;
      // background-color: darkkhaki;
      align-items: center;
      // 收入
      .income {
        width: 50%;
        height: .30rem;
        line-height: .30rem;
        text-align: center;
        border-right: 0.01rem solid #e1c245;
      }
      // 支出
      .expenditure {
        width: 50%;
        height: .30rem;
        line-height: .30rem;
        text-align: center;
      }
    }
  }
  .content {
    // 每一条账单
    /deep/ .van-row {
      line-height: .49rem;
      font-size: .15rem;
      /deep/ .van-col {
        text-align: center;
      }
    }
  }
</style>
